<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>商品分类</span>
		</div>
		<el-tree :props="defaultProps" :load="loadNode" ref="tree" lazy node-key="id" :default-expanded-keys="[1]">
			<span class="custom-tree-node" slot-scope="{ node, data }">
				<div>{{ node.label }}</div>
				<div class="menu-btn">
					<el-button :disabled="data.id===1" align="left" type="text" size="mini" icon="el-icon-edit"
						@click.stop="openEditDialog(node, data)">编辑
					</el-button>
					<el-button type="text" size="mini" align="left" icon="el-icon-plus"
						@click.stop="openAddDialog(node, data)">添加
					</el-button>
					<el-button :disabled="data.id===1" align="left" type="text" size="mini" icon="el-icon-delete"
						@click.stop="handleRemove(node, data)">删除
					</el-button>
				</div>
			</span>
		</el-tree>
		<!-- 添加分类 -->
		<el-dialog title="添加节点" :visible.sync="addDialogVisible" @close="handleDielogClose('addForm')">
			<el-form :rules="rules" :model="addForm" ref="addForm" label-width="80px">
				<el-form-item label="名称" prop="name">
					<el-input v-model="addForm.name"></el-input>
				</el-form-item>
				<el-form-item label="主图" prop="img">
					<single-upload :src.sync='addForm.img' upload-action='/api/upload/common'
						remove-action='/api/upload' :headers='header' :data="{type:'common'}"></single-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button @click="handleAdd" type="primary">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 编辑 -->
		<el-dialog title="添加节点" :visible.sync="editDialogVisible" @close="handleDielogClose('editForm')">
			<el-form :rules="rules" :model="editForm" ref="editForm" label-width="80px">
				<el-form-item label="名称" prop="name">
					<el-input v-model="editForm.name"></el-input>
				</el-form-item>
				<el-form-item label="主图" prop="img">
					<single-upload :src.sync='editForm.img' upload-action='/api/upload/common'
						remove-action='/api/upload' :headers='header' :data="{type:'common'}"></single-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button @click="handleEdit" type="primary">确 定</el-button>
			</span>
		</el-dialog>
	</el-card>
</template>

<script>
	import singleUpload from '@/components/SingleUpload.vue'
	import { Category, Upload } from '@/api/';

	export default {
		components: {
			singleUpload
		},
		data() {
			return {
				header: {
					Authorization: `Bearer ${sessionStorage.token}`
				},
				addDialogVisible: false,
				editDialogVisible: false,
				node: {},
				defaultProps: {
					label: 'name'
				},
				addForm: {
					pId: '',
					name: '',
					img: ''
				},
				editForm: {
					pId: '',
					name: '',
					img: ''
				},
				rules: {
					name: [
						{ required: true, message: '请输入名称', trigger: 'blur' }
					],
					img: [
						{ required: true, message: '请插入图片', trigger: 'blur' }
					]
				}
			}
		},
		methods: {
			async loadNode(node, resolve) {
				//节点对象  生成节点函数
				if (node.level === 0) {
					return resolve([{ id: 1, name: '全部分类' }]);
				};
				let { id } = node.data;
				let { status, data } = await Category.sub({ pId: id });
				if (status) {
					resolve(data);
				};
			},

			handleDielogClose(form) {
				this.$refs. [form].clearValidate();
			},
			openEditDialog(node, data) {
				this.node = node;
				this.editForm = { ...data };
				this.editDialogVisible = true;
			},
			openAddDialog(node, data) {
				//缓存父级node，data
				this.node = node;
				this.addDialogVisible = true;
				// 父级id
				this.addForm.pId = data.id;
			},
			//添加
			handleAdd() {
				this.$refs.addForm.validate(async (valid) => {
					if (valid) {
						let { status, msg, data } = await Category.add({ ...this.addForm })
						if (status) {
							this.$message.success('添加成功');
							//更新dom  插入子节点
							this.$refs.tree.append({ ...this.addForm, ...data }, this.node);
							//关闭弹窗
							this.addDialogVisible = false;
							this.addForm = {
								name: '',
								pId: '',
								img: ''
							}
						} else {
							this.$message.error('添加失败')
						}
					}
				})
			},
			//编辑
			handleEdit() {
				this.$refs.editForm.validate(async (valid) => {
					console.log(this.editForm)
					let { status } = await Category.edit({ ...this.editForm })
					if (status) {
						this.$message.success('编辑成功');
						//更新dom  插入子节点
						this.node.data = this.editForm;
						//关闭弹窗
						this.editDialogVisible = false;
						//清空表单

					} else {
						this.$message.error('编辑失败')
					}
				})
			},
			//删除
			handleRemove(node, data) {
				this.$confirm('此操作将永久删除分类，是否继续？', { type: 'warning' })
					.then(async () => {
						let { status, msg } = await Category.remove({ id: data.id });
						if (status) {
							this.$message.success('删除成功');
							//更新dom  插入子节点
							this.$refs.tree.remove(node)
							//关闭弹窗
							this.editDialogVisible = false;
							//清空表单

						} else {
							this.$message.error(msg)
						}
					})
					.catch(() => {
						this.$message.info('取消成功！')
					})
			}
		}
	}
</script>

<style lang="less" scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.box-card {
		.custom-tree-node {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			padding-right: 8px;
		}
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
